<template>
  <div class="box">
    <div class="jiaoge">
      <p>￥{{ retail_price }}</p>
      <p>享受13期免息,每期1408元(每日0.47元)</p>
      <h3>{{ name }}</h3>
      <p>{{ goods_brief }}</p>
    </div>
    <ul class="ui">
        <h6>商品的参数</h6>
      <li v-for="item in attribute" :key="item.id">
        {{ item.name }}:{{ item.value }}
      </li>
    </ul>

    <van-divider :style="{color:'#ccc'}">常见问题</van-divider>
    <ul class="u2">
        <li v-for="item in issue" :key="item.id">
            <h6>{{item.question}}</h6>
            <p>{{item.answer}}</p>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "AddToCart",
  data() {
    return {
      retail_price: "", //商品的价格
      name: "", //商品的名称
      goods_brief: "", //商品的描述
      attribute: [], //商品的参数
      issue:[],     //常见问题的数据
    };
  },
  props: ["chliddata"], //使用 props来接收父组件传递进来的数据
  mounted() {
    setTimeout(() => {
      console.log(this.chliddata);
      this.retail_price = this.chliddata.info.retail_price;
      this.name = this.chliddata.info.name;
      this.goods_brief = this.chliddata.info.goods_brief;
      this.attribute = this.chliddata.attribute;
      this.issue=this.chliddata.issue
    }, 500);
  },
};
</script>

<style scoped lang='less'>
.box {
  padding: 5px;
  background: #f1f1f1;
  .jiaoge {
    background: white;
    border-radius: 10px;
    padding: 10px;
    :first-child {
      color: red;
      margin-top: 15px;
      margin-bottom: 10px;
    }
    :nth-child(2) {
      color: red;
      font-size: 16px;
      margin: 20px 0;
    }
    h3 {
      font-weight: 700;
      margin-bottom: 10px;
    }
    :last-child {
      font-size: 16px;
    }
  }
  .ui {
    margin-top:10px;
    background: white;
    border-radius: 10px;
    padding: 10px;
    li {
      font-size: 16px;
      margin-top: 10px;

      overflow: hidden;

      white-space: nowrap;

      text-overflow: ellipsis;
    }
    h6{
        font-size: 16px;
    }
    
  }
  .u2{
        
         background: white;
    border-radius: 10px;
    padding: 10px;
    font-size:16px;
    margin-bottom: 20px;
    h6{
        color :red;
        margin-top:10px;
        
    }
    }
}
</style>